<template>
	<view>
		<view class="head">
			<view class="head_left" @tap="back()">
				<image src="../../../static/wode/return.png" mode=""></image>
				<text>返回</text>
			</view>
			<view class="head_mid">
				{{title}}
			</view>
			<view class="head_right">

			</view>
		</view>
		<view class="body">
			<input class="body_number" placeholder="请输入手机号" v-model="loginName" v-if="type=='phone'">
			<input class="body_number" placeholder="请输入邮箱号" v-model="loginName" v-else-if="type=='email'">
			</input>
			<view class="body_bottom">
				<input type="text" value="" placeholder="请输入验证码" v-model="code" />
				<view class="body_bottom_right">
					<view class="body_border">
					</view>
					<text @tap="getCode" v-if="isCode">获取验证码</text>
					<text class="getyanzhengma" v-text="time" v-else></text>
				</view>
			</view>
		</view>
		<view class="btn lbtn" @tap="changeMobile" v-if="type=='phone'||type=='email'">
			完成修改
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '',
				loginName: '', //手机号
				showGetCode: true, //点没点获取验证码
				time: 59,
				isCode: true,
				code: '',
				type: '',
			};
		},
		onLoad(option) {
			this.type = option.type;
			if (this.type == 'phone') {
				this.title = '绑定手机'
			} else if (this.type == 'email') {
				this.title = '绑定邮箱'
			}
		},
		methods: {
			back() { //返回
				uni.navigateBack({
					delta: 1
				})
			},
			getCode() { //获取验证码
				if (this.loginName == '') {
					if (this.type == 'phone') {
						uni.showToast({
							title: '请输入手机号',
							icon: 'none'
						})
						return
					} else if(this.type=='email') {
						uni.showToast({
							title: '请输入邮箱号',
							icon: 'none'
						})
						return
					}
				} else {
					if (this.type == 'phone') {
						var containSpecial = RegExp(
							/^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/
						);
						if (containSpecial.test(this.loginName) != true) {
							uni.showToast({
								title: '请输入正确的手机号',
								icon: 'none'
							})
							return
						}
						var data = {
							mobile: this.loginName
						};

					} else if (this.type == 'email') {
						var containSpecial = RegExp(
							/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/
						);
						if (containSpecial.test(this.loginName) != true) {
							uni.showToast({
								title: '请输入正确的邮箱号',
								icon: 'none'
							})
							return
						}
						var data = {
							mail: this.loginName
						};
					}

					var me = this;
					this.myAjaxNew({
						model: 'user',
						controllerName: 'sms',
						actionName: 'send',
						data: data,
						successBack: function(res) {
							console.log(res);
							uni.showToast({
								title: res.data.message,
								icon: 'none'
							})
							if (res.data.code == 0) { //返回成功
								me.isCode = false;
								me.computeTime();
							}
						},
					})
				}
			},
			computeTime() {
				var me = this;
				setInterval(function() {
					if (me.time > 0) {
						me.time--;
					} else {
						me.isCode = true;
						// me.code = false;
						me.time = 59;
					}
				}, 1000)
			},
			changeMobile() {
				if (this.code == '') {
					uni.showToast({
						title: '输入验证码',
						icon: 'none'
					})
					return
				}
				if (this.loginName == '') {
					uni.showToast({
						title: '输入手机号',
						icon: 'none'
					})
					return
				}
				var me = this;
				var data = {
					mobile: this.loginName,
					user_id: uni.getStorageSync('user_id'),
					vali_code: this.code
				}
				this.myAjaxNewPost({
					model: 'user',
					controllerName: 'userInfo',
					actionName: 'updateUserInfoByCode',
					data: data,
					successBack: function(res) {
						console.log(res.data.data.message)
						if (res.data.data.message == '成功') {
							me.changebendi() //修改本地缓存
							uni.navigateBack({
								delta: 1
							})
							uni.showToast({
								title: '修改成功',
								icon: 'none'
							})
						} else {
							uni.showToast({
								title: res.data.data.message,
								icon: 'none'
							})
						}
					}
				})
			},
			changebendi() {
				var data = {
					user_id: uni.getStorageSync('user_id')
				}
				this.myAjaxNew({
					model: 'user',
					controllerName: 'userInfo',
					actionName: 'query',
					data: data,
					successBack: function(res) {
						console.log(res.data, '用户信息')
						uni.setStorageSync('user_info', res.data.data[0]);
					},
				})
			}
		},
	}
</script>

<style scoped>
	.head {
		width: 100%;
		display: flex;
		justify-content: space-between;
		height: 162upx;
		background: #ffffff;
		padding: 0 24upx;
		z-index: 200;
	}

	.head image {
		width: 20upx;
		height: 36upx;
		margin-right: 9upx;
	}

	.head_left {
		height: 82upx;
		width: 106upx;
		display: flex;
		align-items: center;
		line-height: 82upx;
		color: #666666;
		font-size: 32upx;
		padding-top: 70upx;
	}
	.head_mid{
		padding-top: 90upx;
	}

	.head_right {
		width: 106upx;
	}

	.body {
		margin-top: 20upx;
		background: #FFFFFF;
		font-size: 32upx;
	}

	.body_number {
		width: 100%;
		border-bottom: 1upx solid #E6E6E6;
		padding: 24upx 24upx;
	}

	.body_bottom {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 24upx 24upx;
	}

	.body_border {
		height: 38upx;
		border-right: 1upx solid #E6E6E6;
	}

	.body_bottom_right text {
		margin-left: 36upx;
	}

	.body_bottom_right {
		display: flex;
		align-items: center;
	}

	.lbtn {
		position: absolute;
		bottom: 60upx;
		left: 24upx;
	}
</style>
